<template>
    <div ref="pieChart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'PieChart',
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            const chartDom = this.$refs.pieChart;
            const myChart = echarts.init(chartDom);
            const option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                series: [
                    {
                        name: 'TOP20歌手',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 9385032, name: 'Thomas Bergersen, Two Steps from Hell' },
                            { value: 7882613, name: 'The Prodigy & Tom Morello' },
                            { value: 6972108, name: 'Bowie' },
                            { value: 6308502, name: 'Glee Cast' },
                            { value: 6294210, name: 'Pink Floyd & Floyd' },
                            { value: 5651291, name: 'Håkan Hellström & Göteborgs Symfoniker' },
                            { value: 5469251, name: 'Kanye west ft. frank ocean' },
                            { value: 5278644, name: 'Coldplay & Kylie Minogue' },
                            { value: 5195185, name: 'Eminem feat. Nate Dogg' },
                            { value: 5137666, name: 'Linkin Park & Jay-Z (Live Clean)' },
                            { value: 5010090, name: 'Queen & The Muppets' },
                            { value: 4996816, name: 'The Mountain Goats' },
                            { value: 4961804, name: 'Lil Wayne Feat. Drake & Rick Ross' },
                            { value: 4926236, name: 'deadmau5 & Kaskade' },
                            { value: 4858824, name: 'Wiz Khalifa & John Cena' },
                            { value: 4855250, name: 'Ceremony' },
                            { value: 4822351, name: 'Mac Miller feat. Action Bronson' },
                            { value: 4714660, name: 'K.I.Z' },
                            { value: 4656963, name: 'Frederic Chopin & André Laplante' },
                            { value: 4573013, name: 'Depehce Mode' }
                        ].sort(function (a, b) { return a.value - b.value; }),
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }
    }
};


</script>

<style scoped>
/* 添加一些样式，如果需要的话 */
</style>